<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
    <style>
        img {
            width: 300px;
        }
    </style>
</head>
<body>

<div id="app">
    <img :src="img">
    <br>
    <button @click="pre">上一张</button>
    <button @click="next">下一张</button>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            img: '../imgs/lb1.png',
            images: [
                "../imgs/lb1.png",
                "../imgs/lb2.png",
                "../imgs/lb3.png",
                "../imgs/lb4.png",
                "../imgs/lb5.png",
            ],
            index:0
        },
        methods: {
            pre() {
                 this.index--
                if (this.index<0){
                    this.index = 4
                }
                 this.img = this.images[this.index]
            },

            next() {
                this.index++
                if (this.index > 4 ){
                    this.index = 0
                }
                this.img = this.images[this.index]
            }
        }
    })
</script>
</body>
</html>